<template>
	<Container>
		<Back :toHome="toHome" />
		<view class="title">时光手账</view>
		<scroll-view class="scroll" @scroll="scroll" scroll-with-animation="true" :scroll-x="true" :scroll-left="scrollLeft" :enable-flex="true">
			<view class="item" @tap="tagTap(index)" v-for="(item, index) in detailData" :key="index">
				<view class="hr"></view>
				<view class="tag" :class="{ tagActive: current === index }">
					<text>{{ $u.timeFormat(item.createDateMs, 'yyyy-mm-dd') }}</text>
				</view>
				<view class="hr"></view>
			</view>
		</scroll-view>
		<swiper class="swiper" @change="swiperChange" duration="300" :current="current" :style="{ height: swiperHeight[current] + 'px' }">
			<swiper-item v-for="(item, index) in detailData" :key="item.id"><Detail id="detail" @htmlReady="htmlReady" :index="index" :detailData="item"/></swiper-item>
		</swiper>
		<Comment scene="note" :sceneId="detailData[current].id" :scrollTop="scrollTop" />
	</Container>
</template>

<script>
import Detail from '../../components/detail/detail.vue'
import Comment from '../../components/comment/comment.vue'
import Vue from 'vue'
export default {
	data() {
		return {
			current: 0,
			scrollLeft: 0,
			detailData: [],
			swiperHeight: [],
			toHome: false
		}
	},
	onShareAppMessage() {
		let item = JSON.stringify(this.detailData)
		item = item.replace(/&nbsp;/g, ' ')
		return {
			title: this.user.nickname ? `${this.user.nickname}的新动态：${this.detailData[this.current].title}` : this.detailData[this.current].title,
			path: '/pages/note/noteUserDetail?type=share&item=' + item,
			imageUrl: ''
		}
	},
	components: { Detail, Comment },
	onLoad(option) {
		if (!option) {
			this.detailData = JSON.parse(this.shareItem)
			this.toHome = true
		} else {
			if (option.type === 'share') {
				this.toHome = true
				Vue.prototype.shareItem = option.item
				this.detailData = JSON.parse(option.item)
			} else {
				this.detailData = JSON.parse(decodeURIComponent(option.item)).reverse()
			}
		}
		this.current = this.detailData.length - 1
		this.toScroll()
	},
	methods: {
		scroll: function(e) {
			this.oldScrollLeft = e.detail.scrollLeft
		},
		swiperChange: function(e) {
			this.current = e.detail.current
			this.toScroll()
		},
		tagTap: function(index) {
			this.current = index
			this.toScroll()
		},
		toScroll: function(index) {
			this.scrollLeft = this.oldScrollLeft
			this.$nextTick(function() {
				this.scrollLeft = (this.config.screenWidth / 750) * 240 * this.current
			})
		},
		htmlReady: function(index, e) {
			this.$set(this.swiperHeight, index, e.height)
		}
	}
}
</script>

<style scoped lang="stylus">
.title
	color black
	font-size 40rpx
	text-align center
	font-weight bold
	margin 90rpx auto 40rpx auto

.scroll
	height 200rpx
	width 700rpx
	border-radius 30rpx
	display flex
	align-items center
	z-index 1
	background #FECE61
	box-shadow 0 0 50rpx #dcdfe6
	margin 0 auto

	.item
		display flex
		justify-content center
		align-items center

		.hr
			width 100rpx
			height 4rpx
			background #FF855A

		.tag
			width 40rpx
			height 40rpx
			border 8rpx solid #FF855A
			box-sizing border-box
			border-radius 50%
			margin 0 8rpx
			transition all 0.3s
			position relative
			color white
			text-shadow 1rpx 1rpx 2rpx #FF855A

			text
				position absolute
				left 50%
				top 40rpx
				transform translateX(-50%)
				font-weight 600
				font-size 25rpx
				width 200rpx
				text-align center

		.tagActive
			background #FE5B45
			transform scale(1.2)
			box-shadow 0 0 5rpx #FF855A
			color #FF855A
			text-shadow 0 0 0 #FF855A

.swiper
	width 700rpx
	height 60vh
	margin 40rpx auto 0 auto

#detail>>>.banner
	border-radius 30rpx
</style>
